<template>
	<view class="user-skill-page page">
		<image :src="`${cloudStorage}index/top-bg.png`" mode="widthFix" class="top-bg"></image>
		<CustomNav :isBack="true" color="#000" :topBgColor="topBgColor" title="技能标签"></CustomNav>
		<view class="user-info-block block" :style="'margin-top:'+mt">
			<view class="user-photo-block">
				<image :src="user.avatar" class="user-photo"></image>
			</view>
			<view v-if="user" class="user-name">
				<template v-if="user.name">{{user.name | filterRealName}}</template>
				<template v-else>微信用户</template>
			</view>
		</view>
		<view class="tips-block block">
			<view class="icon"></view>我在零工超市已成功抢活 <text class="num FZHZGBJ"> {{count}} </text> 次
		</view>
		<view class="form-block block">
			<view class="form-label">技能标签（{{form.skill_label.length}}/5）</view>
			<view class="form-cotent">
				<view class="label-item" v-for="(item,index) in form.skill_label" :key="index">{{item.name}}</view>
			</view>
			<view @click="navigate('/page_other/work_type/choose_list?max=5&type=1&ids='+form.skill_label.map(item=>item.id).join(','))" class="add-btn">点击添加或编辑标签</view>
		</view>
		<view class="form-block block">
			<view class="form-label">个人简介</view>
			<view class="form-cotent">
				<textarea class="textarea" :auto-height="true" maxlength="500" placeholder-class="input-placeholder" v-model="form.introduce" placeholder="请对基本情况做简单描述..."></textarea>
			</view>
		</view>
		<view class="btn normal" @click="submit">保存</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		saveUserLabel,
		getUserStatistic
	} from '@/api/user.js';
	import {
		validate
	} from '@/util/validate.js';
	export default {
		data() {
			return {
				topBgColor: 'rgba(0,0,0,0)',
				count:0,
				form: {
					introduce: '',
					skill_label: [],
				},
				rule: {
					introduce: {
						name: '个人简介',
						required: true
					},
					skill_label: {
						name: '技能标签',
						required: true
					},
				},
				user: null,
			}
		},
		methods: {
			submit() {
				if (validate(this.form, this.rule)) {
					let form = JSON.parse(JSON.stringify(this.form));
					form.skill_label = form.skill_label.map(item=>item.id).join(',');
					uni.showLoading({
						title: '保存中',
						mask: true,
					})
					saveUserLabel(form).then(() => {
						this.showToast('保存成功',()=>{
							this.back()
						});
					})
				}
			},
			getDetail() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getUserInfo().then(res => {
					this.form.introduce = res.introduce;
					this.form.skill_label = res.skill_label;
				})
			},
			getCount(){
				getUserStatistic().then(res=>{
					this.count=res.my_took_job;
				})
			},
		},
		onUnload() {
			uni.$off('workType')
		},
		onLoad() {
			uni.$on('workType',(data)=>{
				this.form.skill_label=data;
			})
			this.user = this.$store.getters.user
			this.getDetail();
			this.getCount();
		}
	}
</script>

<style lang="scss" scoped>
	.user-skill-page {
		overflow: hidden;

		.top-bg {
			position: absolute;
			z-index: -1;
			width: 100%;
		}

		.block {
			width: $content-width;
		}

		.tips-block {
			margin: 30rpx auto;
			height: 120rpx;
			border-radius: 14px;
			background: #fff0d6;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			color: #e59f19;
			font-size: 30rpx;

			.icon {
				margin-right: 10rpx;
				width: 50rpx;
				height: 50rpx;
				background: url('@/static/image/work_number.png') no-repeat center;
				background-size: auto 100%;
			}

			.num {
				color: #fd980b;
				font-size: 40rpx;
			}
		}

		.user-info-block {
			margin: 0 auto;
			display: flex;
			align-items: center;

			.user-photo-block {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;

				.user-photo {
					width: 100%;
					height: 100%;
				}
			}

			.user-name {
				font-weight: bold;
				margin-left: 20rpx;
				width: calc(100% - 160rpx);
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				display: flex;
			}
		}

		.form-block {
			margin: 30rpx auto;
			padding: 30rpx;
			background: #fff;
			border-radius: 14px;

			.form-label {
				width: 100%;
				display: flex;
				align-items: center;
			}

			.form-cotent {
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				margin-top: 30rpx;
				display: flex;
				flex-wrap: wrap;
				.label-item{
					color: $orange-color;
					border: 1px solid $orange-color;
					border-radius: 6px;
					padding: 6rpx 30rpx;
					font-size: 28rpx;
					margin-right: 20rpx;
					margin-bottom: 20rpx;
				}
				.textarea{
					width: 100%;
					background: #f5f6f8;
					padding: 30rpx;
					border-radius: 12px;
					min-height: 250rpx;
				}
			}
			.add-btn{
				border: 2px dashed #999;
				border-radius: 12px;
				color: #999;
				display: flex;
				align-items: center;
				justify-content: center;
				padding:20rpx 30rpx;
				font-size: 28rpx;
				margin: 10rpx auto;
			}
		}

		.btn {
			margin: 30rpx auto;
		}
	}
</style>